<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<canvas id="canvas" width="1920" height="1000"></canvas>
</body>
<script>
    var oMyCanvas=document.getElementById('canvas');
    if (oMyCanvas && oMyCanvas.getContext) {
        var context =oMyCanvas.getContext("2d");//转换为2D图形对象；
        if (context) {
            //画一条横线
            context.fillStyle = "#EEEEFF";
            context.fillRect(0, 0, 400, 300);
            var n = 0;
            var dx = 150;
            var dy = 150;
            var s = 100;
            context.beginPath();
            context.fillStyle = 'rgb(100,255,100)';
            context.strokeStyle = 'rgb(0,0,100)';
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 18 * 11;
            for (var i = 0; i < 180; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(dx + x * s, dy + y * s);
            }
            context.closePath();
            context.fill();
            context.stroke();
        }
    }
</script>
</html>